
Security News
ECMAScript 2025 Finalized with Iterator Helpers, Set Methods, RegExp.escape, and More
ECMAScript 2025 introduces Iterator Helpers, Set methods, JSON modules, and more in its latest spec update approved by Ecma in June 2025.
@fluentui/react-jsx-runtime
Advanced tools
React JSX runtime for Fluent UI React
Fluent UI React requires the usage of a custom JSX runtime to support the slots API
[!NOTE] This custom JSX pragma should only be used in cases where you are trying to use the internal Fluent UI React slot API in conjunction with
assertSlots()
.If you are not using the internal slot API, don't use it.
In case you want to re-compose a component and redeclare its render method then this API will be necessary, learn more on Rendering a component with slots
To properly render a component with slots, our custom createElement
method needs to be used instead of default React.createElement
:
NOTE: It works with both
automatic
orclassic
jsxRuntime configuration.
infers
@jsxRuntime automatic
/** @jsxImportSource @fluentui/react-jsx-runtime */
import { assertSlots } from '@fluentui/react-utilities';
const renderButton_unstable = (state: ButtonState) => {
const { iconOnly, iconPosition } = state;
assertSlots<ButtonSlots>(state);
return (
<state.root>
{iconPosition !== 'after' && state.icon && <state.icon />}
{!iconOnly && state.root.children}
{iconPosition === 'after' && state.icon && <state.icon />}
</state.root>
);
};
infers
@jsxRuntime classic
/** @jsx createElement */
// in order to apply our custom `createElement` factory to jsx transforms, to support slot creation, we need to import it physically
import { createElement } from '@fluentui/react-jsx-runtime';
import { assertSlots } from '@fluentui/react-utilities';
const renderButton_unstable = (state: ButtonState) => {
const { iconOnly, iconPosition } = state;
assertSlots<ButtonSlots>(state);
return (
<state.root>
{iconPosition !== 'after' && state.icon && <state.icon />}
{!iconOnly && state.root.children}
{iconPosition === 'after' && state.icon && <state.icon />}
</state.root>
);
};
FAQs
Custom JSX runtime for @fluentui/react-components
The npm package @fluentui/react-jsx-runtime receives a total of 133,501 weekly downloads. As such, @fluentui/react-jsx-runtime popularity was classified as popular.
We found that @fluentui/react-jsx-runtime demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 10 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ECMAScript 2025 introduces Iterator Helpers, Set methods, JSON modules, and more in its latest spec update approved by Ecma in June 2025.
Security News
A new Node.js homepage button linking to paid support for EOL versions has sparked a heated discussion among contributors and the wider community.
Research
North Korean threat actors linked to the Contagious Interview campaign return with 35 new malicious npm packages using a stealthy multi-stage malware loader.